<script setup lang="ts">
import ToTopGoCar from '@/views/toTopGoCar/index.vue'
import { PropertiesList, usePropertiesListStore } from '@/store/modules/propertiesList'
import { storeToRefs } from 'pinia'

const { getterPropertiesList } = storeToRefs(usePropertiesListStore())

document.getElementById('toTop')?.scrollIntoView()

const propertiesList = ref<PropertiesList>()
propertiesList.value = getterPropertiesList.value

const componentMap = {
  swiper: defineAsyncComponent(() => import('./components/carousel.vue')),
  seckill: defineAsyncComponent(() => import('./components/Seckill.vue')),
  recommend: defineAsyncComponent(() => import('./components/recommends.vue')),
  goods: defineAsyncComponent(() => import('./components/Recommend.vue')),
  shop: defineAsyncComponent(() => import('./components/Channel.vue')),
} as any
</script>
<template>
  <div>
    <template v-for="(item, index) in propertiesList?.components" :key="index">
      <component :is="componentMap[item?.value]" :properties-lists="item" />
    </template>
    <!-- 悬浮导航 -->
    <ToTopGoCar />
  </div>
</template>

<style scoped lang="scss"></style>
